<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="账期">
          <el-date-picker value-format="yyyyMM" v-model="form.acctMonth" style="width: 140px" type="month" placeholder="请选择账期" :picker-options="endDateDisabled"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-cascader clearable v-model="form.areaId" :options="options" ref="cascader" :props="props" :show-all-levels="false" @visible-change="getAreaData"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" plain @click="exportExcel">导出Excel</el-button>
          <el-button type="primary" plain @click="exportPpt">导出PPT</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="initTable()">
      <el-tab-pane label="台阶收入趋势" name="1">
        <StepsOverall :form="searchData" ref="StepsOverall"></StepsOverall>
      </el-tab-pane>
      <el-tab-pane label="经营单元增长情况" name="2">
        <StepsUnitgrouth :form="searchData" ref="StepsUnitgrouth"></StepsUnitgrouth>
      </el-tab-pane>
      <el-tab-pane label="经营单元的结构细项变化" name="3">
        <StepsManage :form="searchData" ref="StepsManage"></StepsManage>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { downLoadExcelBody, downLoadPptBody } from "@/utils/zipdownload";
import { mapGetters } from "vuex";
// import { roleDeptTreeselecttw } from "@/api/workspace/income";
import $Api from "@/api/workspace/income";
import $barCodeApi from "@/api/barCode/index";
// import { stepMaxMonth } from "@/api/barCode/index";
import StepsOverall from "./components/stepsOverall.vue";
import StepsManage from "./components/stepsManage.vue";
import StepsUnitgrouth from "./components/stepsUnitgrouth.vue";
export default {
  name: "barCode",
  components: {
    StepsOverall,
    StepsUnitgrouth,
    StepsManage
  },
  data () {
    return {
      form: {
        acctMonth: "",
        areaId: ""
      },
      searchData: {
        acctMonth: "",
        areaId: ""
      },
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      options: [],
      props: {
        value: "deptId",
        label: "displayName",
        emitPath: false,
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          if (node.value) {
            // roleDeptTreeselecttw({
            //     areaId: node.value
            // }).then(res => {
            //     if (res.code == 0) {
            //         if (node.level == 3) {
            //             res.depts.forEach(item => {
            //                 item.leaf = true;
            //             });
            //         }
            //         resolve(res.depts);
            //     }
            // });
            $Api.roleDeptTreeselecttw(
              { areaId: node.value },
              res => {
                if (res.code == 0) {
                  if (node.level == 3) {
                    res.depts.forEach(item => {
                      item.leaf = true;
                    });
                  }
                  resolve(res.depts);
                }
              },
              err => { }
            );
          }
        }
      },
      activeName: "1"
    };
  },
  computed: {
    ...mapGetters(["deptId", "deptName"])
  },
  created () { },
  mounted () {
    this.getMaxMonths();
  },
  methods: {
    getAreaData (val) {
      if (val == true) {
        let obj = { deptId: this.deptId, displayName: this.deptName };
        let arr = [];
        arr.push(obj);
        this.options = arr;
      }
    },
    pickerDisabled () {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
                n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        }
      };
    },
    getMaxMonths () {
      return new Promise(resolve => {
        // stepMaxMonth().then(res => {
        //     resolve(res.msg);
        //     this.form.acctMonth = res.msg;
        //     this.disabledTime = res.msg;
        //     var obj = {
        //         deptId: Number(this.deptId),
        //         displayName: this.deptName
        //     };
        //     let arr = [];
        //     arr.push(obj);
        //     this.options = arr;
        //     this.form.areaId = Number(this.deptId);
        //     this.handleQuery();
        // });
        $barCodeApi.stepMaxMonth({}, res => {
          resolve(res.msg);
          this.form.acctMonth = res.msg;
          this.disabledTime = res.msg;
          var obj = {
            deptId: Number(this.deptId),
            displayName: this.deptName
          };
          let arr = [];
          arr.push(obj);
          this.options = arr;
          this.form.areaId = Number(this.deptId);
          this.handleQuery();
        });
      });
    },
    exportExcel () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "台阶收入分析";
      downLoadExcelBody("/StepIncome/export", obj, fileName);
    },
    exportPpt () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "台阶收入分析";
      downLoadPptBody("/mhIncome/exportPPT", obj, fileName);
    },
    handleQuery () {
      this.searchData.areaId = this.form.areaId;
      this.searchData.acctMonth = this.form.acctMonth;
      this.initTable();
    },
    initTable () {
      const { activeName } = this;
      if (activeName == 1) {
        this.$refs.StepsOverall.getData();
      } else if (activeName == 2) {
        this.$refs.StepsUnitgrouth.getData();
      } else if (activeName == 3) {
        this.$refs.StepsManage.getData();
      }
    }
  }
};
</script>
